<template>
  <div class="talk">
    <button @click="getLoveTk">点击获取一句土味情话</button>
    <ul>
      <li v-for="tk in talkList" :key="tk.id">{{ tk.content }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
import { ref, reactive } from "vue";
import axios from "axios";
import { nanoid } from "nanoid";

let talkList = reactive([
  {
    id: "qh01",
    content: "我生在南方，活在南方，栽在你手里，总算是去过不一样的地方。",
  },
  { id: "qh02", content: "你知道我的心在哪边么？左边？不对，在你那边 ！" },
  { id: "qh03", content: "你摸摸我的衣服，是不是做你男 / 女朋友的料子？" },
  { id: "qh04", content: "这是我的手背，这是我的脚背 ，你是我的宝贝。" },
  { id: "qh05", content: "我一点也不想你，一点半再想。" },
]);

async function getLoveTk() {
  //发请求
  //连续解构赋值+重命名
  let {
    data: {
      data: { content },
    },
  } = await axios.get("https://api.xygeng.cn/one");
  //把请求回来的对象包装成一个对象

  let obj = { id: nanoid(), content };
  talkList.unshift(obj);
}
</script>

<style scoped>
.talk {
  background-color: pink;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>
